<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="https://cdn.goeasy.io/goeasy-im-1.0.7.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/restapi.js"></script>
    <script src="js/imservice.js"></script>
    <script src="js/controller.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="app">
    <!--登录界面-->
    <div class="login" style="display: block;">
        <div class="login-box" id="login-box">
            <h2 class="login-box-title">GoEasy IM</h2>
            <div class="login-box-input">
                <div class="login-input-box">
                    <input type="text" placeholder="请输入账号" name="username" class="login-input" id="username" />
                </div>
                <div class="login-input-box">
                    <input type="password" placeholder="请输入密码" name="password" class="login-input" id="password" />
                </div>
                <div class="login-error-box" id="login-error-box" style="display: none;">
                    <img class="error-icon" src="images/Vector.png">
                    <span class="error-info">请输入正确的用户名和密码</span>
                </div>
                <div class="login-btn-box">
                    <div class="login-btn-box-info" onclick="login()">
                        <button type="button" class="login-btn">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 好友列表 -->
    <div id="friends-box" style="display: none;">
        <div class="friends-box-title">
            <span>联系人</span>
        </div>
        <div class="current-user-box">
            <div class="current-user-icon" id="current-user-icon">
                <!--当前登录用户-->
                <img src="#" class="user-avatar" id="current-user-avatar"/>
                <div class="current-user-name" id="current-user-name"></div>
            </div>
        </div>
        <div id="friend-list">
            <!--好友列表-->
        </div>
        <div id="group-list">
            <!--群列表-->
        </div>
    </div>
    <!--私聊 聊天框-->
    <div class="chat-box" id="chat-box" style="display: none;">
        <div class="chat-box-current-friend">
            <!--当前聊天的好友-->
            <div class="exit-current-chat-box" id="exit-current-chat-box" onclick="privateChatBackToContacts()">
                <img src="images/Arrow-Left.png" class="exit-icon"/>
            </div>
            <span class="current-friend-name"></span>
        </div>
        <div class="chat-box-content" id="private-box">
            <div id="top" onclick="loadPrivateHistory()">加载更多历史消息</div>
            <!-- 历史消息或者新发消息 -->
            <div id="chat-box-content"></div>
        </div>
        <div class="chat-send-box">
            <div class="chat-send-box-info">
                <div class="input-box">
                    <input type="text" placeholder="发送消息" class="send-input-box" id="send-input-box"/>
                </div>
                <div class="send-box-btn">
                    <button type="submit" class="send-btn" id="sendMessageButton">发送</button>
                </div>
            </div>
        </div>
    </div>
    <!--群聊 聊天框-->
    <div class="chat-box" id="group-chat-box" style="display: none;">
        <div class="chat-box-current-friend">
            <!--当前聊天的群-->
            <div class="exit-current-chat-box" id="group-exit-current-chat-box" onclick="groupChatBackToContacts()">
                <img src="images/Arrow-Left.png" class="exit-icon"/>
            </div>
            <span class="current-friend-name"></span>
            <div class="group-member" onclick="showGroupMember()">
                <img src="images/group-icon.png">
            </div>
        </div>
        <div class="chat-box-content" id="group-box">
            <div id="group-top" onclick="loadGroupHistory()">加载更多历史消息</div>
            <!-- 历史消息或者新发消息 -->
            <div id="group-chat-box-content"></div>
        </div>
        <div class="chat-send-box">
            <div class="chat-send-box-info">
                <div class="input-box">
                    <input type="text" placeholder="发送消息" class="send-input-box" id="group-send-input-box"/>
                </div>
                <div class="send-box-btn">
                    <button type="submit" class="send-btn" id="groupSendMessageButton">发送</button>
                </div>
            </div>
        </div>
    </div>

    <div id="group-member-layer">
        <div class="chat-box-current-friend">
            <!--当前聊天的群-->
            <div class="exit-current-chat-box" onclick="hideGroupMember()">
                <img src="images/Arrow-Left.png" class="exit-icon"/>
            </div>
            <span class="current-friend-name group-member-amount"></span>
        </div>
        <div class="layer-container">
        </div>
    </div>
    <!--所有需要的模板-->
    <div style="display: none;">
        <!--好友列表模板-->
        <div class="friend-item" id="friend-item-template">
            <div class="friend-item-box">
                <img src="#" class="friend-avatar-desaturate friend-avatar"/>
                <span class="friend-name"></span>
            </div>
            <div class="friend-item-message-badge">
                <span class="message-count"></span>
            </div>
        </div>
        <!--群列表模板-->
        <div class="friend-item" id="group-item-template">
            <div class="friend-item-box">
                <img src="images/group.png" class="friend-avatar"/>
                <span class="friend-name group-name"></span>
            </div>
            <div class="friend-item-message-badge group-item-message-badge">
                <span class="message-count"></span>
            </div>
        </div>
        <!--展示好友发送的消息模板-->
        <div class="chat-box-friend-message-template" id="chat-box-friend-message-template">
            <img class="user-avatar"/>
            <div class="chat-left-box">
                <li class="chat-box-friend-content">
                    <span class="chat-message chat-message-friend"></span>
                </li>
                <div class="left-triangle"></div>
            </div>
        </div>
        <!--展示自己发送的消息模板-->
        <div class="chat-box-self-message-template" id="chat-box-self-message-template">
            <div class="chat-right-box">
                <div class="right-triangle"></div>
                <li class="chat-box-self-content">
                    <span class="chat-message chat-message-self"></span>
                </li>
            </div>
            <img class="user-avatar"/>
        </div>
    </div>
    <div class="toast">

    </div>
</div>
</body>
</html>
